<template>
	<view class="page bg-white">
		<view class="head flex align-center justify-around padding-tb-sm bg-white">
			<view class="cuIcon-search text-grey"></view>
			<view>聊天</view>
			<navigator url="/pages/chat/address_book" class="icon-container">
			  <view class="cuIcon-addressbook text-grey"></view>
			  <view class="badge">3</view>  <!-- 角标 -->
			</navigator>
		</view>
		
		<scroll-view scroll-x class="bg-white nav">
			<view class="flex text-center padding-lr-lg">
				<view class="cu-item flex-sub" :class="chat_type==1?'cur':'text-grey'"   @tap="tabSelect" :data-id="1">
					朋友
				</view>
				<view class="cu-item flex-sub" :class="chat_type==2?'cur':'text-grey'"   @tap="tabSelect" :data-id="2">
					陌生人
				</view>
				<view class="cu-item flex-sub" :class="chat_type==3?'cur':'text-grey'"   @tap="tabSelect" :data-id="3">
					群聊
				</view>
			</view>
		</scroll-view>
		
		<view class="chat_content">
			<block v-if="chat_list.length > 0 && chat_type == 1">
				<navigator url="/pages/chat/private_chat" class="flex align-center justify-between margin-tb-lg" v-for="(item,index) in chat_list" :key="index">
					<view class="flex align-center">
						<view class="position_realtive">
							<image class="cu-avatar lg round   margin-right-sm" :src="item.avatar" mode="aspectFit"></image>
							<view v-if="item.has_new" class="avatar_badge"></view>
						</view>
						
						<view>
							<view :class="item.has_new ?  'nickname' : 'text-grey nicknames' "> {{item.nickname}}</view>
							<view class="text-grey">{{item.last_msg}}</view>
						</view>
					</view>
					<view class="text-center">
						 <view class="new_msg_badge" v-if="item.unread_num > 0">{{item.unread_num || 0}}</view>
						<view class="text-grey sm last_time">{{item.last_time}}</view>
					</view>
				</navigator>
			</block>
			
			<!-- 陌生人 -->
			<block v-if="chat_list.length > 0  && chat_type == 2">
				<view class="cu-bar search bg-white">
					<view class="search-form round">
						<text class="cuIcon-search"></text>
						<input  :adjust-position="false" type="text" placeholder="搜索"
							confirm-type="search"></input>
					</view>
				</view>
				<navigator url="/pages/chat/private_chat" class="flex align-center justify-between friend_item" v-for="(item,index) in chat_list" :key="index">
					<view class="flex align-center">
						<view class="position_realtive">
							<image class="cu-avatar lg round   margin-right-sm" :src="item.avatar" mode="aspectFit"></image>
							<view v-if="item.has_new" class="avatar_badge"></view>
						</view>
						
						<view>
							<view class="nickname"> {{item.nickname}}</view>
							<view class="text-grey">{{item.last_msg}}</view>
						</view>
					</view>
					<view class="text-center">
						 <view class="agree_btn">同意</view>
					</view>
				</navigator>
			</block>
			
			<block v-if="group_chat_list.length > 0 && chat_type == 3">
				<navigator  url="/pages/chat/group_chat"  class="flex align-center justify-between friend_item group_chat_list" v-for="(item,index) in group_chat_list" :key="index">
					<view class="flex align-center">
						<view class="position_realtive">
							<image class="cu-avatar lg radius   margin-right-sm" :src="item.avatar" mode="aspectFill"></image>
							<view v-if="item.has_new" class="avatar_badge"></view>
						</view>
						
						<view>
							<view class="nickname"> {{item.nickname}}</view>
							<view class="text-grey">{{item.last_msg}}</view>
						</view>
					</view>
					<view class="text-center">
						 <view class="text-gray text-xs margin-bottom-sm" v-if="item.unread_num > 0">{{item.unread_num || 0}}个群成员</view>
						<view class="text-gray sm text-xs">{{item.last_time}}</view>
					</view>
				</navigator>
			</block>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chat_type : 1,
				chat_list : [
					  {
						"id": 1,
						"avatar": "https://ds.js.design/assets/img/d6bc3d319995a8ea550b594c9a4de7b9.png",
						"nickname": "黑不溜秋",
						"last_msg": "明天见面如何?",
						"last_time": "05:45",
						"unread_num": 3,
						"has_new": true
					  },
					  {
						"id": 2,
						"avatar": "https://ds.js.design/assets/img/df0aa582223c03e9030ce86abc16f4fc.png",
						"nickname": "小白",
						"last_msg": "最近怎么样?",
						"last_time": "10:30",
						"unread_num": 1,
						"has_new": true
					  },
					  {
						"id": 3,
						"avatar": "https://ds.js.design/assets/img/59a5bde80b3e05d3ebff1cf87e68b32a.png",
						"nickname": "阿辉",
						"last_msg": "有空一起吃饭?",
						"last_time": "14:15",
						"unread_num": 5,
						"has_new": false
					  },
					  {
						"id": 4,
						"avatar": "https://ds.js.design/assets/img/55f6737f26ad01a273e91a3b3417f2a1.png",
						"nickname": "晴天",
						"last_msg": "周末去爬山吧!",
						"last_time": "18:50",
						"unread_num": 0,
						"has_new": false
					  },
					  {
						"id": 5,
						"avatar": "https://ds.js.design/assets/img/f211d008436da84f4dc66727dd5d8ba9.png",
						"nickname": "大壮",
						"last_msg": "项目进展如何?",
						"last_time": "20:20",
						"unread_num": 2,
						"has_new": true
					  },
					  {
						"id": 6,
						"avatar": "https://ds.js.design/assets/img/94de1dd0f10eee75f57dba5a0f2d85ca.png",
						"nickname": "小七",
						"last_msg": "一起打游戏吗?",
						"last_time": "22:10",
						"unread_num": 4,
						"has_new": true
					  }
					],
					group_chat_list : [
						  {
							"id": 1,
							"avatar": "https://img.js.design/assets/img/6001753d1d656e3ee945d9d3.jpg#2d5795959016b13ab2fbd2ef7e2d81d3",
							"nickname": "开心麻将1群",
							"last_msg": "明天见面如何?",
							"last_time": "05:45",
							"unread_num": 3,
							"has_new": true
						  },
						  {
							"id": 2,
							"avatar": "https://img.js.design/assets/img/6791b61e49f9cc81df42fc0c.jpeg#e8678cae278aed03dde8a4419d814725",
							"nickname": "开心麻将2群",
							"last_msg": "最近怎么样?",
							"last_time": "10:30",
							"unread_num": 1,
							"has_new": true
						  },
						  {
							"id": 3,
							"avatar": "https://img.js.design/assets/img/622cab5e8788521dfcc7ca9f.jpg",
							"nickname": "开心麻将3群",
							"last_msg": "有空一起吃饭?",
							"last_time": "14:15",
							"unread_num": 5,
							"has_new": false
						  },
						  {
							"id": 4,
							"avatar": "https://img.js.design/assets/img/61de9e670ce2893657371ca5.png",
							"nickname": "长沙麻将",
							"last_msg": "周末去爬山吧!",
							"last_time": "18:50",
							"unread_num": 0,
							"has_new": false
						  }
						]

			}
		},
		methods: {
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
				this.chat_type = e.currentTarget.dataset.id
			},
			
		}
	}
</script>

<style scoped>
	.head{
		font-size: 40rpx;
		color: rgba(56, 56, 56, 1);
	}
	.icon-container {
	  position: relative; /* 让子元素可以绝对定位 */
	  display: inline-block; /* 保持大小适应内容 */
	  
	}
	
	.badge {
	  position: absolute;
	  color: #fff;
	  top: -8rpx;
	  right: -15rpx;
	  background: #FF8D1A; /* 黄色 */
	  font-size: 16rpx;
	  font-weight: bold;
	  padding: 5rpx 10rpx;
	  border-radius: 50%;
	  min-width: 30rpx; /* 保证圆形 */
	  text-align: center;
	  line-height: 30rpx;
	  height: 30rpx;
	}
	.chat_content{
		padding: 30rpx 36rpx;
	}
	.avatar_badge {
		position: absolute;
		right: 20rpx;
		bottom: 0;
		background: rgba(255, 141, 26, 1);
		border: 2rpx solid rgba(255, 255, 255, 1);
		width: 22rpx;
		height: 22rpx;
		border-radius: 50%;
	}
	.group_chat_list .avatar_badge {
		position: absolute;
		right: 10rpx;
		top: -10rpx;
		background: rgba(255, 141, 26, 1);
		border: 2rpx solid rgba(255, 255, 255, 1);
		width: 22rpx;
		height: 22rpx;
		border-radius: 50%;
	}
	.new_msg_badge {
	  background: rgba(255, 141, 26, 1); /* 背景色 */
	  width: 32rpx;
	  height: 32rpx;
	  border-radius: 50%; /* 圆形 */
	  color: #fff;
	  font-size: 24rpx;
	  font-weight: bold;
	  text-align: center;
	  line-height: 32rpx; /* 让文字垂直居中 */
	  display: inline-block; /* 避免 inline 元素间距问题 */
	  margin-bottom: 5rpx;
	}
	.nickname{
		color: rgba(254, 94, 41, 1);
		font-size: 36rpx;
		font-weight: 700;
		margin-bottom: 10rpx;
	}
	.nicknames {
		font-size: 36rpx;
		font-weight: 700;
	}
	.last_time{
		font-size: 24rpx;
		margin-top: 10rpx;
	}
	.friend_item{
		padding: 30rpx 0;
		border-bottom: 2rpx solid rgba(237, 237, 237, 1);;
	}
	.agree_btn{
		border-radius: 8rpx;
		background: rgba(254, 94, 41, 1);
		font-size: 22rpx;
		border-radius: 10rpx;
		padding: 10rpx 15rpx;
		color: #fff;
	}
</style>
